<script setup lang="ts">
import { useBaseStore } from '@/stores/base'
import router from '@/router'
import {onMounted, ref} from "vue";
const baseStore = useBaseStore()

const wsAddr = ref("")
const mediaConf = ref(['video'])
const stunAddr = ref("")
const turnAddr = ref("")
const commandChain = ref("p2p")
const onlyLocalNet = ref(false)
const onlyTcpTurnNet = ref(false)

onMounted( ()=>{
  wsAddr.value = baseStore.rtcConfig.wsAddr
  let stunAddrStr = ""
  baseStore.rtcConfig.stunAddr.forEach(item =>{
    stunAddrStr+=item
    stunAddrStr+=","
  })
  stunAddr.value = stunAddrStr
} )

</script>

<template>
  <div>
    <el-row>
      <el-button @click="router.push({ path: 'rtcLocal' })">共享桌面</el-button>
      <el-button @click="router.push({ path: 'rtcRemote' })">加入房间</el-button>
    </el-row>
    <el-card>
      个人信息：可以设置 中继服务、流媒体服务器(录像用)、流媒体来源(查看监控视频用)、是否允许对方远程控制自己、是否传递声音、是否允许传递文件、
      、Android场景下允许一拖N、
    </el-card>
    <el-card>
      <el-form label-width="100px">
        <el-form-item label="信令服务器：">
          <el-input v-model="wsAddr"></el-input>
        </el-form-item>
        <el-form-item label="STUN服务器：">
          <el-input v-model="stunAddr"  placeholder="该配置为空时只能在局域网内连接,默认为空！" :disabled="onlyLocalNet"></el-input>
          <el-checkbox v-model="onlyLocalNet" label="仅局域网内通信" />
        </el-form-item>
        <el-form-item label="TURN服务器：">
          <el-input v-model="turnAddr" placeholder="在对称NAT网络下解决P2P连接问题,是STUN的后备连接,默认为空"></el-input>
          <el-checkbox v-model="onlyTcpTurnNet" label="仅使用后备tcp连接" />
        </el-form-item>
        <el-form-item label="流媒体配置：">
          <el-checkbox-group v-model="mediaConf">
            <el-checkbox value="video" name="type" disabled>
              屏幕
            </el-checkbox>
            <el-checkbox value="audio" name="type">
              声音
            </el-checkbox>
            <el-checkbox value="camera" name="type">
              摄像头
            </el-checkbox>
            <el-checkbox value="microphone" name="type">
              麦克风
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="控制指令链路：">
          <el-radio-group v-model="commandChain">
            <el-radio value="p2p" >P2P打洞</el-radio>
            <el-radio value="ws" >信令中转</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>
